<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/jquery-3.6.0.min.js"></script>
    <script>

        $(function () {
            let myImg = document.getElementById("myImg");
            let numX = 0;
            let numY = 0;
            $("#U").click(function () {
                myImg.style.marginTop = numY - 100 + "px"
                numY -= 100;
            })
            $("#R").click(function () {
                myImg.style.marginLeft = numX + 100 + "px"
                numX += 100;
            })
            $("#D").click(function () {
                myImg.style.marginTop = numY + 100 + "px"
                numY += 100;
            })
            $("#L").click(function () {
                myImg.style.marginLeft = numX - 100 + "px"
                numX -= 100;
            })
        })

    </script>
</head>
<body>
<div>
    <button id="U">===上===</button>
    <button id="R">===右===</button>
    <button id="D">===下===</button>
    <button id="L">===左===</button>
    <span></span>
</div>
<table style="width: 500px;height: 500px" >

   <tr>
       <td>
           <img src="../1.1.6img/1.gif" alt="" id="myImg">
       </td>
   </tr>
</table>
</body>
</html>